<template>
  <div id="body">

    <el-row :gutter="20">
      <!--左侧的菜单 start-->
      <el-col :span="4" id="left-cont" :style="{'--scrollHeight' : scrollHeight.left}">
        <el-col :span="24" id="menu">
          <h5>福多多开放平台开发文档</h5>
          <el-menu
            @open="handleMenu"
            :default-active="defaultActive"
            class="el-menu-vertical-demo">

            <el-submenu v-for="(item,key) in menus" :key="key" :index="key.toString()">
              <template slot="title">
                <span>{{item.module_name}}</span>
              </template>
              <el-menu-item-group v-for="(val,k) in item.child" :key="k">
                <el-menu-item :index="key+'-'+k" @click="clickSecondMenu(val)">{{val.module_name}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-col>
      <!--左侧的菜单 end-->

      <el-col :span="20" id="right-cont" :style="{'--scrollHeight' : scrollHeight.right}">
        <!--面包屑标题-->
        <el-breadcrumb separator="/" class="main-breadcrumb">
          <el-breadcrumb-item>{{document.name}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{mainCont.module_name}}</el-breadcrumb-item>
        </el-breadcrumb>
        <div id="detail">
          <el-row>
            <el-col :span="23">
              <el-collapse v-model="activeNames" class="main-content">
                <div class="main-title">{{mainCont.module_name}}（{{mainCont.module_link}}）</div>

                <div class="func-param">
                  <div class="title">功能描述</div>
                  <div class="desc">{{mainCont.module_desc !== '' ? mainCont.module_desc : '暂无' }}</div>
                </div>

                <!--公共请求参数-->
                <el-collapse-item title="公共请求参数" name="1">
                  <el-table
                    :data="mainCont.common_request"
                    border
                    style="width: 100%">
                    <el-table-column
                      prop="parameter_name"
                      label="参数名"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="parameter_type"
                      label="参数类型"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="is_write"
                      label="是否必填"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="description"
                      label="描述"
                      width="400">
                    </el-table-column>
                    <el-table-column
                      prop="example_value"
                      label="示例值">
                    </el-table-column>
                  </el-table>
                </el-collapse-item>

                <!--API请求入参-->
                <el-collapse-item title="API请求入参" name="2">
                  <el-table
                    :data="mainCont.request"
                    border
                    style="width: 100%">
                    <el-table-column
                      prop="parameter_name"
                      label="参数名"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="parameter_type"
                      label="参数类型"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="is_write"
                      label="是否必填"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="description"
                      label="描述"
                      width="400">
                    </el-table-column>
                    <el-table-column
                      prop="example_value"
                      label="示例值">
                    </el-table-column>
                  </el-table>
                </el-collapse-item>

                <!--公共响应参数-->
                <el-collapse-item title="公共响应参数" name="3">
                  <el-table
                    :data="mainCont.common_response"
                    border
                    style="width: 100%">
                    <el-table-column
                      prop="parameter_name"
                      label="参数名"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="parameter_type"
                      label="参数类型"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="is_write"
                      label="是否必填"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="description"
                      label="描述"
                      width="400">
                    </el-table-column>
                    <el-table-column
                      prop="example_value"
                      label="示例值">
                    </el-table-column>
                  </el-table>
                </el-collapse-item>

                <!--API响应参数-->
                <el-collapse-item title="API响应参数" name="4">
                  <el-table
                    :data="mainCont.response"
                    border
                    style="width: 100%">
                    <el-table-column
                      prop="parameter_name"
                      label="参数名"
                      width="180">
                    </el-table-column>
                    <el-table-column
                      prop="parameter_type"
                      label="参数类型"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="is_write"
                      label="是否必填"
                      width="100">
                    </el-table-column>
                    <el-table-column
                      prop="description"
                      label="描述"
                      width="400">
                    </el-table-column>
                    <el-table-column
                      prop="example_value"
                      label="示例值">
                    </el-table-column>
                  </el-table>
                </el-collapse-item>

                <!--公共参数错误码-->
                <el-collapse-item title="公共参数错误码" name="5">
                  <el-table
                    :data="mainCont.common_code"
                    border
                    style="width: 100%">
                    <el-table-column
                      prop="code"
                      label="错误码"
                      width="200">
                    </el-table-column>
                    <el-table-column
                      prop="msg"
                      label="描述">
                    </el-table-column>
                  </el-table>
                </el-collapse-item>

                <!--业务错误码-->
                <el-collapse-item title="业务错误码" name="6">
                  <el-table
                    :data="mainCont.work_code"
                    border
                    style="width: 100%">
                    <el-table-column
                      prop="code"
                      label="错误码"
                      width="200">
                    </el-table-column>
                    <el-table-column
                      prop="msg"
                      label="描述">
                    </el-table-column>
                  </el-table>
                </el-collapse-item>

                <!--请求示例-->
                <el-collapse-item title="请求示例" name="7">
                  <el-input
                    type="textarea"
                    :rows="2"
                    v-model="mainCont.example_request"
                    :autosize="{ minRows: 2, maxRows: 5}"
                    readonly
                  >
                  </el-input>
                </el-collapse-item>

                <!--响应示例-->
                <el-collapse-item title="响应示例" name="8">
                  <el-input
                    type="textarea"
                    :rows="2"
                    readonly
                    v-model="mainCont.example_response"
                    :autosize="{ minRows: 2, maxRows: 5}"
                  >
                  </el-input>
                </el-collapse-item>
              </el-collapse>
            </el-col>
          </el-row>
          <el-backtop target="#detail">
            <i class="el-icon-top"></i>
          </el-backtop>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { getMenus,getDetail } from '../api/index'
  export default {
    name: 'index',
    data () {
      return {
        menus: {}, // 左侧菜单数据
        defaultActive: '0-0',
        mainCont: {}, // 右侧详细信息
        activeNames: ['1','2','3','4','5','6','7','8'], // 折叠面板开启的元素
        scrollHeight: {
          left: '',
          right: ''
        }, // 滚动区域高度
        document: {
          name: ''
        }, // 文档参数
      }
    },
    created() {
      this.getMenusInfo()
      // 获取屏幕高度
      this.scrollHeight = this.setClientHeight()
    },
    mounted(){
      let that = this;
      // 监听可视区域的高度
      window.onresize = function(){
        that.scrollHeight = that.setClientHeight()
      }
    },
    methods: {
      setClientHeight(){
        let clientHeight = `${document.documentElement.clientHeight}`;
        /*
           * 获取屏幕高度
           * 60：#app到顶部的距离
           * 30：右侧面包导航的高度
           * 10：滚动区域距离底部的距离
           */
        console.log(clientHeight - 60 - 30 + 'px')
        return  {
          left: clientHeight - 60 - 30 + 'px',
          right: clientHeight - 60 - 30 - 10 + 'px'
        }
      },
      /**
       * 设置菜单数据
       */
      async getMenusInfo() {
        getMenus().then(res=>{
          let menuInfo = res[0]['child']
          // 菜单数据
          this.menus = menuInfo
          // 右侧文档主菜单名称（初始化）
          this.document = {
            name: menuInfo[0].module_name
          }

          // 获取第一个菜单的第一个元素的id
          this.getDetailInfo(menuInfo[0]['child'][0]['id'])
        })
      },
      /**
       * 设置详情数据
       */
      async getDetailInfo(id) {
        getDetail({id: id}).then(res=>{
          this.mainCont = {
            module_name: res.module_name, // 接口名称
            module_desc: res.description, // 接口描述
            module_link: res.link, // 接口地址
            common_request: res.common_request,   // 公共请求参数
            common_response: res.common_response, // 公共请求参数
            request: res.request,   // 请求参数
            response: res.response, // 响应参数
            common_code: res.code_list,    // 公共错误码
            work_code: [],    // 业务错误码
            example_request: res.example_request,    // 请求示例
            example_response: res.example_response,  // 响应示例
          }
        })
      },
      /**
       * 菜单点击事件【展开菜单出发】
       */
      async handleMenu(key) {
        let nowMenu = this.menus[key]
        this.document = {
          name: nowMenu.module_name
        }
        // 展开主菜单的时候展示该主菜单下的第一个子菜单内容，并选中第一个子菜单
        await this.getDetailInfo(nowMenu['child'][0]['id'])
        this.defaultActive = key + '-0'
      },
      /**
       * 子菜单点击事件
       */
      async clickSecondMenu(val) {
        await this.getDetailInfo(val.id)
      }
    }
  }
</script>

<style lang="less">
  body::-webkit-scrollbar{ /*隐藏整个屏幕滚动*/
    display:none;
  }
  /*左侧菜单区*/
  #left-cont{
    padding-left: 0 !important;
    /*min-width: 200px;*/
    height: var(--scrollHeight);
    /*height: 700px;*/
  }
  #menu{
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0 !important;
    height: 100%;
  }
  /*滚动条宽度*/
  #menu::-webkit-scrollbar {
    width: 2px;
    height: 1px;
  }
  /*滚动条样式*/
  #menu::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }
  #menu::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
  }

  /*右侧详情区*/
  #right-cont{
    height: var(--scrollHeight);
    /*height: 700px;*/
  }
  #detail{
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 0 !important;
    height: 100%;
  }
  /*滚动条宽度*/
  #detail::-webkit-scrollbar {
    width: 2px;
    height: 1px;
  }
  /*滚动条样式*/
  #detail::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #535353;
  }
  #detail::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 10px;
    background: #EDEDED;
  }


  #body {
    width: 100%;

    .el-submenu__title{
      text-align: left;
    }
    .el-menu-item-group__title{
      padding: 0;
    }
    .el-submenu .el-menu-item{ /*菜单项*/
      text-align: left;
      display: inline-block;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 190px;
    }
    .el-submenu__title, .el-menu-item{
      height: 45px;
      line-height: 45px;
    }
    .main-breadcrumb{
      color: black;
      height: 30px;
      background: #fff;
    }
    .main-content{
      margin-top: 20px;
      text-align: left;
    }
    .main-title{
      margin-top: 15px;
      line-height: 38px;
      font-size: 24px;
      font-weight: 700;
      word-break: break-all;
    }
    /*功能下片区*/
    .el-collapse-item__header{
      font-size: 16px;
      font-weight: 700;
    }
    .el-table__body{
      font-size: 12px;
    }
    .el-collapse-item{
      margin-top: 15px;
    }
    .func-param{
      margin-top: 30px;
    }
    .func-param .title{
      font-size: 16px;
      font-weight: 700;
    }
    .func-param .desc{
      padding: 10px 0;
      font-size: 13px;
      color: #303133;
      line-height: 1.769230769230769;
    }
    .el-table thead {
      font-size: 13px;
      color: #302f2f;
    }
  }
</style>
